<template>
    <el-container>
        <el-header>
            <div class="left-panel">
               
            </div>
            <div class="right-panel">
                <el-button :icon="Search"   type="primary" @click="opBindData">查询</el-button>
                <el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
                <el-button text type="primary" @click="showCondition = !showCondition">
                    <span v-if="!showCondition">展开</span>
                    <span v-else>收起</span>
                    <vab-icon
                        class="vab-dropdown"
                        :class="{ 'vab-dropdown-active': fold }"
                        icon="arrow-up-s-line"
                    />
                </el-button>
            </div>
        </el-header>
        <el-foot v-show="showCondition">
            <vab-query-form-top-panel>
                
                <el-form inline label-width="49px" :model="queryForm" style="margin-top: 5px">
                    <el-form-item label="账单日期" label-width="80px">
                        <el-date-picker
                            style="width: 300px"
                            v-model="queryList.billDates"
                            type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            format="YYYY-MM-DD HH:mm:ss"
                            range-separator="-"
                            unlink-panels="true"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :default-time="defaultTime"
                        />
                    </el-form-item>
                    <el-form-item label="对账日期" label-width="80px">
                        <el-date-picker
                            style="width: 300px"
                            v-model="queryList.saleAccountDates"
                            type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            format="YYYY-MM-DD HH:mm:ss"
                            range-separator="-"
                            unlink-panels="true"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :default-time="defaultTime"
                        />
                    </el-form-item>
                    <el-form-item label="对账单号" label-width="80px">
                        <el-input
                            placeholder="---请输入对账单号---"
                            v-model="queryList.saleAccountCode"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="客户名称" label-width="80px">
                        <el-input
                            placeholder="---请输入客户名称---"
                            v-model="queryList.storeName"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="账单编号" label-width="80px">
                        <el-input
                            placeholder="---请输入账单编号---"
                            v-model="queryList.billCode"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="开票日期" label-width="80px">
                        <el-date-picker
                            style="width: 300px"
                            v-model="queryList.invoiceDates"
                            type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            format="YYYY-MM-DD HH:mm:ss"
                            range-separator="-"
                            unlink-panels="true"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :default-time="defaultTime"
                        />
                    </el-form-item>
                    <el-form-item label="销售金额" label-width="80px">
                        <el-input
                            placeholder="销售金额最小值"
                            v-model="queryList.billAmountMin"
                            style="width: 147px"
                        />-
                        <el-input
                            placeholder="销售金额最大值"
                            v-model="queryList.billAmountMax"
                            style="width: 147px"
                        />
                    </el-form-item>
                    <el-form-item label="收款金额" label-width="80px">
                        <el-input
                            placeholder="收款金额最小值"
                            v-model="queryList.payAmountMin"
                            style="width: 147px"
                        />-
                        <el-input
                            placeholder="收款金额最大值"
                            v-model="queryList.payAmountMax"
                            style="width: 147px"
                        />
                    </el-form-item>
                    <el-form-item label="结余金额" label-width="80px">
                        <el-input
                            placeholder="结余金额最小值"
                            v-model="queryList.unPayAmountMin"
                            style="width: 147px"
                        />-
                        <el-input
                            placeholder="结余金额最大值"
                            v-model="queryList.unPayAmountMax"
                            style="width: 147px"
                        />
                    </el-form-item>
                    <el-form-item label="备注" label-width="80px">
                        <el-input
                            placeholder="---请输入备注---"
                            v-model="queryList.remarks"
                            style="width: 300px"
                        />
                    </el-form-item>
                   
                   
                  
                </el-form>
            </vab-query-form-top-panel>
        </el-foot>

        <el-main class="nopadding">
                <scTable
                    ref="mytable"
                    :queryType="'billInfo/pages'"
                    :data="listData"
                    :queryList="queryList"
                    :column="columnList"
                    :orderList="OrderList"
                    :sort-orders="['ascending', 'descending']"
                    @selection-change="selectionChange"
                    :summaryMethod="getSummaries"
                    show-summary
                    row-key="BillId"
                    key="BillId"
                    stripe
                    border
                >
                    <el-table-column type="selection" width="50"></el-table-column>
                    <el-table-column prop="billId" label="编号" width="80" sortable></el-table-column>
                    <el-table-column prop="billDate" label="账单日期" width="170" sortable></el-table-column>
                    <el-table-column prop="billCode" label="账单编号" width="200" sortable></el-table-column>
                    <el-table-column prop="salesAccountCode" label="对账编号" width="200" sortable></el-table-column>
                    <el-table-column prop="saleAccountDates" label="对账日期" width="200">
                        <template #default="scope">
                        {{scope.row.saleAccountStartDate? scope.row.saleAccountStartDate.slice(0, 10):scope.row.saleAccountStartDate}}
                        {{'-'}}
                        {{scope.row.saleAccountEndDate? scope.row.saleAccountEndDate.slice(0, 10):scope.row.saleAccountEndDate}}
                    </template>
                    </el-table-column>
                    <el-table-column prop="storeName" label="客户名称" width="220" sortable></el-table-column>
                    <el-table-column prop="billAmount" label="销售金额" width="120" sortable></el-table-column>
                    <el-table-column prop="balance" label="电子账户余额" width="140" sortable></el-table-column>
                    <el-table-column prop="payAmount" label="收款金额" width="120" sortable>
                        <template #default="scope">
                            <span style="color: #318cf8;text-decoration:underline;cursor: pointer;" @click="opPayRecord(scope.row)">{{scope.row.payAmount}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="unPayAmount" label="结余金额" width="120" sortable>
                        <template #default="scope">
                            <span style="color: red;">{{scope.row.unPayAmount}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  label="账单详情" width="150">
                        <template #default="scope">
                            <span style="color: #318cf8;text-decoration:underline;cursor: pointer;" @click="opOrderDetail(scope.row)">销售物料清单</span>
                        </template>
                    </el-table-column>
             
                    <el-table-column prop="statusDesc" label="账单状态" width="100"></el-table-column>
                    <el-table-column prop="invoiceDate" label="开票日期" width="170">
                        <template #default="scope">
                            <span style="color: #318cf8;text-decoration:underline;cursor: pointer;" @click="opInvoiceDetail(scope.row)">{{scope.row.invoiceDate}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remarks" label="备注" width="150"></el-table-column>
                    <el-table-column label="操作" fixed="right" align="right" width="220" >
                    <template #default="scope">
                        <el-button-group>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                @click="opPayInfo(scope.row, scope.$index)"
                            >收款信息录入</el-button>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                v-if="!scope.row.invoiceDate"
                                @click="opInvoiceInfo(scope.row, scope.$index)"
                            >开票</el-button>
                            <el-button
                                text
                                type="danger"
                                size="small"
                                v-if="scope.row.status==0"
                                @click="opClose(scope.row, scope.$index)"
                            >关帐</el-button>
                        </el-button-group>
                        
                    </template>
                </el-table-column>
                </scTable>
            
        </el-main>
    </el-container>

    <detail-dialog
        v-if="dialogDetail"
        ref="detailObj"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogDetail = false"
    ></detail-dialog>
    <pay-record-dialog
        v-if="dialogPayRecord"
        ref="payRecordObj"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogPayRecord = false"
    ></pay-record-dialog>

    <pay-Info-dialog
        v-if="dialogPayInfo"
        ref="payInfoObj"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogPayInfo = false"
    ></pay-Info-dialog>
    <invoice-Info-dialog
        v-if="dialogInvoiceInfo"
        ref="invoiceInfoObj"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogInvoiceInfo = false"
    ></invoice-Info-dialog>
    <template>
        <el-dialog
            v-model="auditState"
            title="审核备注"
            :width="500"
            :center="true"
            append-to-body
            style="height: 480px"
        >
            <el-row>
                <el-input v-model="auditRemarks" type="textarea" :rows="5" />
            </el-row>
            <template #footer>
                <el-button @click="auditState = false">取 消</el-button>
                <el-button type="primary" :loading="isSaveing" @click="setState">确定</el-button>
            </template>
        </el-dialog>
    </template>
</template>

<script>
import detailDialog from "./detail.vue";
import payRecordDialog from "./payRecordDetail.vue";
import payInfoDialog from "./payInfo.vue";
import invoiceInfoDialog from "./InvoiceInfo.vue";

import publicjs from "@/api/model/publicjs";
import tool from "@/utils/tool";
import config from "@/config";
export default {
    name: "billInfo-store",
    components: {

     
        payInfoDialog,
        invoiceInfoDialog,
        payRecordDialog,
        detailDialog,
        publicjs,
    },
    data() {
        return {
            dialogDetail: false,//销售物料清单
            dialogPayInfo: false,//付款信息录入
            dialogInvoiceInfo: false,//开票信息录入
            dialogPayRecord: false,//付款记录
            dialogSave: false,
            //审核状态
            auditState: false,
            showCondition: false,
            selectionRows: [],
            pkList: ["TradeId"],
            columnList: [],
            OrderList: { StoreId: "Asc" },
            queryList: {
                BillType:0
            },
            result: "", // 运行结果
            props1: {
                checkStrictly: true,
                emitPath: false,
            },
            orgCodeList: "",
            orgNameList: "",
            addState: true, //可以增加
            editState: true, //可以修改
            editBatchState: true, //可以批量修改
            deleteState: true, //可以删除
            optionsTradeType: [],
            orgType: 1,
            defaultTime:[
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
            ]
           
        };
    },
    methods: {
        //表格选择后回调事件
        selectionChange(selection) {
            this.selectionRows = selection;
        },
        //添加
        opAdd() {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("Add");
            });
        },
        //编辑
        opEdit(row) {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("Edit").setData(row);
            });
        },
        //查看
        opShow(row) {
            this.dialogDetail = true;
            this.$nextTick(() => {
                this.$refs.detailDialog.setData(row);
                this.$refs.detailDialog.open("Show");
            });
        },
        //收款记录
        opPayRecord(row) {
            this.dialogPayRecord = true;
                    this.$nextTick(() => {
                        this.$refs.payRecordObj.setData(row.payRecords);
                        this.$refs.payRecordObj.open("Show");
                    });
        },
        //销售物料清单
        opOrderDetail(row) {
                    this.dialogDetail = true;
                    this.$nextTick(() => {
                        this.$refs.detailObj.setData(row.billItems);
                        this.$refs.detailObj.open("Show");
                    });
        },

        //付款信息录入
        opPayInfo(row) {
            this.dialogPayInfo = true;
            this.$nextTick(() => {
                this.$refs.payInfoObj.setData(row);
                this.$refs.payInfoObj.open("Add");
            });
        },
        //开票信息录入
        opInvoiceInfo(row)
        {
            this.dialogInvoiceInfo = true;
            this.$nextTick(() => {
                this.$refs.invoiceInfoObj.setBillId(row.billId);
                this.$refs.invoiceInfoObj.open("Add");
            });
            
        },
        //查看开票信息
        opInvoiceDetail(row){
            this.dialogInvoiceInfo = true;
            this.$nextTick(() => {
                this.$refs.invoiceInfoObj.setData(row.invoiceInfo);
                this.$refs.invoiceInfoObj.open("Show");
            });
        },
        //关账          
        async opClose(row){
            try {
					var returnValue = await this.$API.auth.PostProcessApi.post(
						"billInfo/closeBill",
						{ billId: row.billId }
					);
					if (returnValue.status == 200) {
							this.$message.success("操作成功");
							await this.opBindData();

						} else {
							this.$message.error("操作失败:" + returnValue.msg);
						}
				} catch (error) {
					this.loading = false;
					return false;
				}
        },
        //本地更新数据
        handleSaveSuccess(data, mode) {
            if (mode == "Add") {
                this.$refs.mytable.refresh();
            } else if (mode == "Edit") {
                this.$refs.mytable.refresh();
            }
        },
        //合计
        getSummaries(param) {
            const { columns, data  } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "合计";
                    return;
                }
                const values = this.selectionRows.map((item) =>
                    Number(item[column.property])
                );

                if (
                    column.property == "payAmount" ||
                    column.property == "unPayAmount"
                ) {
                    if (!values.every((item) => isNaN(item))) {
                        const total = values.reduce((a, b) => a + b, 0);
                        sums[index] = total;
                    }
                }
            });
            return sums;
        },
        async opBindData() {
            this.$refs.mytable.clearSort();
            this.$refs.mytable.getData();
        },
        resetSearch() {
            this.queryList = {};
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/options",
                    { Codes: ["StoreTradeType"] }
                );
                if (returnValue.status == 200) {
                    this.optionsTradeType = returnValue.response.find(
                        (p) => p.code == "StoreTradeType"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
       
    },
    async mounted() {
        this.orgType = tool.data.get("USER_INFO").AccountType;
        await this.initOptions();
        await this.opBindData();
    },
};
</script>
<style>
/* /deep/ 为深度操作符，可以穿透到子组件 */
::v-deep .el-table {
    display: flex;
    flex-direction: column;
}
::v-deep .el-table__body-wrapper {
    order: 1;
}
</style>